<template>
	<view>
		<view class="Address_1">
			<text class="Address_2">收件人</text>
			<uni-easyinput v-model="name" style="width: 80%;" :placeholderStyle="placeholderStyle"
				placeholder="请填写收件人" @input="input"></uni-easyinput>

		</view>
		<view class="Address_1">
			<text class="Address_2">手机号码</text>
			<uni-easyinput v-model="phone" style="width: 80%;" :placeholderStyle="placeholderStyle"
				placeholder="请填写手机号码" @input="input"></uni-easyinput>

		</view>
		<view class="Address_1">
			<text class="Address_2">所在地址</text>
			<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"
				field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"
				parent-field="parent_code" @change="onchange" @nodeclick="onnodeclick">
			</uni-data-picker>
			
		</view>
		<view class="Address_1">
			<text class="Address_12">详细地址</text>
			<uni-easyinput type="textarea" styles="styles" v-model="Detailed_address" placeholder="请填写详细地址">
			</uni-easyinput>
		</view>
		<view class="Address_1" style="height: 100rpx;">
			<text class="Address_2">设置为默认地址</text>
			<view class="uni-list-cell uni-list-cell-pd" style="position: absolute;left: 600rpx;">
				<switch @change="switch1Change" checked v-if="defaulta===true"/>
				<switch @change="switch1Change" v-else-if="defaulta===false"/>
			</view>
		</view>
		<!-- <button>1</button> -->
		<button class="uniBt_but uniBt_but22" type="warn" size="default" @click="Address()">新增地址</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				styles: {
				},
				placeholderStyle: '',
				width: '560rpx',
				//收件人
				name: '',
				//手机号
				phone: '',
				//省 市 区
				province: '',
				city: '',
				area: '',
				areavalue:'',
				//地区
				region: '',
				//详细地址
				Detailed_address: '',
				//默认地址状态
				defaulta: false,
				//用户id
				userid:'',
			};
		},
		onLoad() {
			
		},
		methods: {
			switch1Change: function(e) {
				this.defaulta = e.detail.value
			},
			onchange(e) {
				this.region = ''
				const value = e.detail.value
				value.forEach((item, index, arr) => {
					this.region = this.region + item.text
					console.log("地区" + this.region)
				})
				console.log(this.region)
			},
			onnodeclick(e) {
				this.areavalue=e.value
				console.log(this.areavalue)
			},
			input(e) {
				console.log('输入内容：', e);
			},
			Address() {
				console.log(this.name + " " + this.phone + " " + this.region + " " + this.Detailed_address + " " +
					this.defaulta+" "+this.areavalue)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.Address_1 {
		background-color: #FFFFFF;
		border-radius: 0px;
		padding: 20rpx;
		margin-top: 5rpx;
		position: relative;
	}

	.Address_2 {
		position: absolute;
		top: 38rpx;
		font-family: "微软雅黑";
		font-size: 14px;
	}

	.Address_12 {
		position: absolute;
		top: 100rpx;
		font-family: "微软雅黑";
		font-size: 14px;
	}

	/deep/ .uni-easyinput {
		left: 130rpx;
	}

	//弹出地址框样式
	.Runaddress_1 {
		height: 100rpx;
		text-align: center;
		font-size: 18px;
		padding-top: 10px;
	}

	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 35rpx;
		top: 15rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(81, 211, 211, 1);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
	}

	.uniBt_but22 {
		box-shadow: 5px 6px 10px #51d3d3;
		border-radius: 100px;
		width: 700rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 15px;
		margin-top: 720rpx;
		margin-left: 0rpx;
	}
</style>
